<style lang="scss">
.z-data-arr .is-table-form-error input {
  border-color: #F56C6C
}
</style>

<template>
<div class="z-data-arr">
<!--  data arr {{binds.config}} {{widgetName}} {{inited}}-->
  <slot></slot>
  <template v-if="isCustomRender && inited">
    <component ref="com" :is="widgetName"></component>
  </template>
</div>
</template>

<script>
import {buildDataTableDef} from "./hooks";

const PREFIX = 'z-data__';

export default {
  name: "ZDataArr",
  inject: [
    'curFormCon'
  ],
  props: {
    binds: {
      type: Object,
      default() {
        return {
          config: {}
        }
      }
    },
    arrValue: {
      type: Array,
      default() {
        return []
      }
    }
  },
  watch: {
    arrValue(newVal) {
      // console.log('arrValue', this.curFormCon.getLocked())
      if (!this.curFormCon.getLocked()) {
        if (this.$refs.com && this.$refs.com.setValue) {
          this.$refs.com.setValue(newVal)
        }
      }
    }
  },
  data() {
    let self = this
    return {
      inited: false,
      isCustomRender: this.binds.config.ui.isCustomRender,
      widgetName:  PREFIX + ZY.rid(6),
      tableConfig: this.binds.config,
      isLocked: false,
      injectTable: {
        onChange(v) {
          if (!self.isLocked) {
            self.isLocked = true
            // console.log('injectTable onChange', v)
            self.$emit('arr-val-change', v)
            setTimeout(( ) => {
              self.isLocked = false
            }, 30)
          }
        }
      }
    }
  },
  created() {
    this.reload()
    // console.log('data-arr', this.tableConfig)
  },
  methods: {
    reload() {
      this.inited = false
      this.private_render();
      // this.$nextTick(() => {
      //   this.inited = true
      // })
      this.inited = true
    },
    private_render() {
      let name = this.widgetName
      let def = buildDataTableDef(this.tableConfig.items.properties, this, {
        tableConfig: this.tableConfig,
        parentKey: this.binds.label,
        tableAttrStr: ZY.attr2Str(
            [
              ['style', 'width: 100%'],
              [':show-summary', true]
            ]
        ),
        injectTable: this.injectTable,
        actions: [
          {
            label: '删除',
            on: {
              click(scope, e) {
                // console.log('sdsdsds', scope, e)
                scope.ctx.deleteItem(scope.props.$index)
              }
            },
            attrs: {
              type: 'danger',
              size: 'small'
            },
          },
        ]
      })
      def.name = name
      globalThis.CustomCusComponent.register(def)
    },
  }
}
</script>


